<!-- 承运商个人主页 -->
<template>
  <basic-container>
    <el-button @click="handle" style="margin-left: 20px">{{ title }}</el-button>
    <el-button
      type="primary"
      v-if="obj.remarkReject"
      @click="viewRecord"
      style="margin-left: 20px"
      >驳回原因</el-button
    >
    <!-- <el-button icon="el-icon-refresh" style="margin-left: 20px">刷新</el-button> -->
    <br /><br />
    <avue-form :option="option" v-model="obj" @submit="submit">
      <template slot-scope="{ disabled, size }" slot="mailbox">
        <div>
          <avue-array
            :disabled="disabled"
            :size="size"
            v-model="obj.mailbox"
            placeholder="请输入邮箱"
          ></avue-array>
        </div>
      </template>
      <template slot="menuForm" v-if="emptyBtn">
        <el-button icon="el-icon-delete" @click="handleEmpty">清 空</el-button>
      </template>
    </avue-form>
  </basic-container>
</template>
<script>
import {
  getPersonalInformation,
  updatePersonalInformation,
} from "@/api/basedata/carriers";
import { isEmail } from "@/util/validate";
export default {
  data() {
    var validateEmail = (rule, value, callback) => {
      if (value && value.length > 0) {
        let num = value.filter((i) => i && !isEmail(i));
        let valueArr = value.filter((i) => i);
        let newArr = [...new Set(valueArr)];
        if (newArr.length !== valueArr.length) {
          callback(new Error("请勿输入重复邮箱"));
        }
        if (num.length > 0) {
          callback(new Error("请输入正确的邮箱"));
        } else {
          callback();
        }
      } else {
        callback();
      }
    };
    return {
      loading: true,
      obj: {
        remarkReject: "",
        mailbox: [],
      },
      emptyBtn: false,
      option: {
        type: 0,
        detail: true,
        height: "auto",
        labelWidth: "180",
        menuWidth: "250",
        submitText: "保存",
        // emptyText: "清空",
        submitBtn: false,
        emptyBtn: false,
        column: [
          {
            label: "业务伙伴编码",
            prop: "tmId",
            disabled: true,
          },
          {
            label: "名称",
            prop: "name",
            disabled: true,
          },
          {
            label: "区域（省份）",
            prop: "addressProvince",
            disabled: true,
          },
          {
            label: "城市",
            prop: "addressCity",
            disabled: true,
          },
          {
            label: "街道",
            prop: "adddressStreet",
            disabled: true,
          },
          {
            label: "电话",
            prop: "phone",
            disabled: true,
          },
          {
            label: "公司名称",
            prop: "cpmpanyName",
            rules: [
              {
                required: true,
                message: "请输入公司名称",
                trigger: "blur",
              },
            ],
          },
          {
            label: "邮箱",
            prop: "mailbox",
            formslot: true,
            rules: [{ validator: validateEmail, trigger: "blur" }],
          },
          {
            label: "法人姓名",
            prop: "legalPersonName",
          },
          {
            label: "法人身份证号",
            prop: "legalPersonNo",
          },
          {
            label: "道路运输证营运证号",
            prop: "certificateTransportNo",
            // rules: [
            //   {
            //     required: true,
            //     message: "请输入道路运输证营运证号",
            //     trigger: "blur",
            //   },
            // ],
          },
          {
            label: "营业执照有效期",
            type: "datetimerange",
            prop: "certificateOperationValidDate",
            defaultTime: ["00:00:00", "23:59:59"],
            format: "yyyy-MM-dd HH:mm:ss",
            valueFormat: "yyyy-MM-dd HH:mm:ss",
            startPlaceholder: "请选择开始日期",
            endPlaceholder: "请选择结束日期",
          },
          {
            label: "道路运输证校验有效期",
            type: "datetimerange",
            prop: "certificateTransportValidDate",
            defaultTime: ["00:00:00", "23:59:59"],
            format: "yyyy-MM-dd HH:mm:ss",
            valueFormat: "yyyy-MM-dd HH:mm:ss",
            startPlaceholder: "请选择开始日期",
            endPlaceholder: "请选择结束日期",
          },
          {
            label: "法人身份证正面照片",
            prop: "legalPersonPicFront",
            type: "upload",
            span: 12,
            listType: "picture-img",
            propsHttp: {
              res: "data",
              name: "originalName",
              url: "link",
            },
            action: "/api/blade-resource/oss/endpoint/put-file-attach",
            rules: [
              {
                required: true,
                message: "请上传法人身份证正面照片",
                trigger: "change",
              },
            ],
          },
          {
            label: "法人身份证背面照片上传",
            prop: "legalPersonPicBack",
            type: "upload",
            span: 12,
            listType: "picture-img",
            propsHttp: {
              res: "data",
              name: "originalName",
              url: "link",
            },
            action: "/api/blade-resource/oss/endpoint/put-file-attach",
            rules: [
              {
                required: true,
                message: "请上传法人身份证背面照片",
                trigger: "change",
              },
            ],
          },
          {
            label: "营业执照照片上传",
            prop: "certificateOperationPic",
            type: "upload",
            span: 12,
            listType: "picture-img",
            propsHttp: {
              res: "data",
              name: "originalName",
              url: "link",
            },
            action: "/api/blade-resource/oss/endpoint/put-file-attach",
            rules: [
              {
                required: true,
                message: "请上传营业执照照片",
                trigger: "change",
              },
            ],
          },
          {
            label: "道路运输证照片上传",
            prop: "certificateTransportPic",
            type: "upload",
            span: 12,
            listType: "picture-img",
            propsHttp: {
              res: "data",
              name: "originalName",
              url: "link",
            },
            action: "/api/blade-resource/oss/endpoint/put-file-attach",
            // rules: [
            //   {
            //     required: true,
            //     message: "请上传道路运输证照片",
            //     trigger: "change",
            //   },
            // ],
          },
        ],
      },
    };
  },
  components: {},
  computed: {
    title() {
      return this.option.detail ? "编 辑" : "返 回";
    },
  },
  mounted() {
    this.getUserInfo();
  },
  methods: {
    getUserInfo() {
      this.loading = true;
      getPersonalInformation().then((res) => {
        const data = res.data.data;
        this.obj = {
          ...data,
          certificateOperationValidDate: [
            data.certificateOperationValidDateStart || "",
            data.certificateOperationValidDateEnd || "",
          ],
          certificateTransportValidDate: [
            data.certificateTransportValidDateStart || "",
            data.certificateTransportValidDateEnd || "",
          ],
          mailbox: data.mailbox.split(","),
        };
        this.loading = false;
      });
    },
    handle() {
      this.option.detail = !this.option.detail;
      this.option.submitBtn = !this.option.submitBtn;
      // this.option.emptyBtn = !this.option.emptyBtn;
      this.emptyBtn = !this.emptyBtn;
    },
    submit(form, done) {
      let updateData = {
        ...form,
        certificateOperationValidDateStart: form.certificateOperationValidDate
          ? form.certificateOperationValidDate[0]
          : "",
        certificateOperationValidDateEnd: form.certificateOperationValidDate
          ? form.certificateOperationValidDate[1]
          : "",
        certificateTransportValidDateStart: form.certificateTransportValidDate
          ? form.certificateTransportValidDate[0]
          : "",
        certificateTransportValidDateEnd: form.certificateTransportValidDate
          ? form.certificateTransportValidDate[1]
          : "",
        mailbox: form.mailbox.filter((i) => i).join(","),
      };
      this.loading = true;
      updatePersonalInformation(updateData).then(
        () => {
          this.loading = false;
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          done();
          this.handle();
        },
        (error) => {
          window.console.log(error);
        }
      );
    },
    viewRecord() {
      this.$alert(this.obj.remarkReject, "驳回原因", {
        showCancelButton: true,
        showConfirmButton: false,
        cancelButtonText: "关闭",
      });
    },
    //清空
    handleEmpty() {
      this.option.column.forEach((item) => {
        if (!item.disabled) {
          this.obj[item.prop] = "";
        }
      });
      this.obj.mailbox = [];
    },
  },
};
</script>

<style></style>
